<template>
  <div>
    <el-form
      :inline="true"
      :model="form"
      size="small"
      class="searchForm bg-gray flex flex-wp flex-a-c"
    >
      <el-form-item label="提现人姓名">
        <el-input v-model.trim="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model.trim="form.phone"></el-input>
      </el-form-item>

      <el-form-item label="审核状态">
        <el-select v-model="form.auditStatus" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="(item, index) in auditStatusObj"
            :key="index"
            :label="item"
            :value="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提现状态">
        <el-select v-model="form.cashStatus" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="(item, index) in cashStatusObj"
            :key="index"
            :label="item"
            :value="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间:">
        <el-date-picker
          v-model="rangeTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-button size="small" @click="search()">查询</el-button>
      <el-button icon="el-icon-search" size="small" @click="reset()"
        >重置</el-button
      >
      <el-button size="small" @click="exportExcel()">导出</el-button>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          提现总额 {{ formatNumber(orderObj.total) }}
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          总手续费 {{ formatNumber(orderObj.fee) }}
        </div>
      </el-col>
    </el-row>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column prop="realname" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="small"
            @click="showAuditModel(scope.row)"
            v-if="scope.row.auditStatus == 1"
            >审核</el-button
          >
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="addTime"
        label="提现时间"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          {{ new Date(scope.row.addTime).Format('YYYY-MM-DD hh:mm:ss') }}
        </template>
      </el-table-column> -->
      <el-table-column prop="userName" label="提现人姓名" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" align="center">
      </el-table-column>

      <el-table-column
        prop="money"
        label="提现金额(元)"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="poundageMoney"
        label="手续费(元)"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column label="提现账户" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.bankCard }}
        </template>
      </el-table-column>

      <el-table-column
        prop="auditorName"
        label="审核人"
        align="center"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="auditOpinion"
        label="审核反馈"
        align="center"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="realname" label="审核状态" align="center">
        <template slot-scope="scope">
          {{ auditStatusObj[scope.row.auditStatus] }}
        </template>
      </el-table-column>
      <el-table-column prop="realname" label="提现状态" align="center">
        <template slot-scope="scope">
          {{ cashStatusObj[scope.row.cashStatus] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="addTime"
        label="申请时间"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          {{
            scope.row.addTime
              ? new Date(scope.row.addTime).Format('YYYY-MM-DD hh:mm:ss')
              : ''
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="auditTime"
        label="审核时间"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          {{
            scope.row.auditTime
              ? new Date(scope.row.auditTime).Format('YYYY-MM-DD hh:mm:ss')
              : ''
          }}
        </template>
      </el-table-column>
    </el-table>
    <div class="text-c margin-t-d">
      <el-pagination
        @current-change="getDataList"
        :current-page.sync="pageInfo.pageindex"
        :page-size="pageInfo.pagesize"
        background
        layout="total,prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="提现审核"
      :visible.sync="auditVisible"
    >
      <el-form :model="auditData" label-width="140px">
        <el-form-item label="审核结果">
          <el-radio v-model="auditData.auditStatus" :label="1"
            >审核通过</el-radio
          >
          <el-radio v-model="auditData.auditStatus" :label="0"
            >审核驳回</el-radio
          >
        </el-form-item>
        <el-form-item label="驳回原因" v-if="auditData.auditStatus == 0">
          <el-input
            v-model.trim="auditData.auditOpinion"
            type="textarea"
            :rows="4"
            maxlength="200"
            placeholder="请输入驳回原因,最多200字"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-c">
        <el-button size="small" round @click="auditVisible = false"
          >取 消</el-button
        >
        <el-button size="small" round type="primary" @click="submit()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        userName: '',
        phone: '',
        auditStatus: '',
        cashStatus: '',
      },
      rangeTime: [],
      qdForm: {},
      auditStatusObj: {
        1: '审核中',
        2: '审核通过',
        3: '审核拒绝',
      },
      cashStatusObj: {
        1: '提现中',
        2: '提现成功',
        3: '提现失败',
      },
      auditData: {
        auditStatus: 1,
        auditOpinion: '',
        id: '',
      },
      pageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }, //页码
      orderObj: {
        fee: '',
        total: '',
      },
      tableData: [],
      auditVisible: false,
    }
  },
  beforeMount() {
    this.search()
  },
  methods: {
    reset() {
      this.form = {
        userName: '',
        phone: '',
        auditStatus: '',
        cashStatus: '',
      }
      this.rangeTime = []
      this.search()
    },
    search() {
      this.qdForm.userName = this.form.userName ? this.form.userName : undefined
      this.qdForm.phone = this.form.phone ? this.form.phone : undefined
      this.qdForm.auditStatus = this.form.auditStatus
        ? this.form.auditStatus
        : undefined
      this.qdForm.cashStatus = this.form.cashStatus
        ? this.form.cashStatus
        : undefined
      this.qdForm.startTime =
        this.rangeTime && this.rangeTime[0]
          ? this.rangeTime[0].Format('YYYY-MM-DD hh:mm:ss')
          : undefined
      this.qdForm.endTime =
        this.rangeTime && this.rangeTime[1]
          ? this.rangeTime[1].Format('YYYY-MM-DD 23:59:59')
          : undefined
      this.pageInfo = {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }
      this.getDataList()
      this.getOrderStatistics()
    },
    getDataList() {
      let params = {
        pageNum: this.pageInfo.pageindex,
        pageSize: this.pageInfo.pagesize,
        req: this.qdForm,
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .postData('adm/withdraw/pageList', params)
        .then((data) => {
          loading.close()
          this.tableData = data.resData.data
          this.pageInfo.total = data.resData.count
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
        })
    },
    exportExcel() {
      const loading = this.$loading({
        lock: true,
        text: '正在导出...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .getFileData('adm/withdraw/export', this.qdForm)
        .then((data) => {
          loading.close()
          // this.tableData = data.resData.data;
          // this.pageInfo.total = data.resData.count;
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
        })
    },
    //审核弹窗
    showAuditModel(item) {
      this.auditData = {
        auditStatus: 1,
        auditOpinion: '',
        id: item.id,
      }
      this.auditVisible = true
    },
    // 获取统计数据
    getOrderStatistics() {
      let params = {
        ...this.form,
        startTime: this.qdForm.startTime,
        endTime: this.qdForm.endTime,
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .postData('adm/withdraw/statistics', params)
        .then((data) => {
          loading.close()
          this.orderObj = data.resData
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
        })
    },
    submit() {
      let params = {
        ...this.auditData,
        auditorId: this.$store.state.userInfo.id,
      }

      if (params.auditStatus == 2) {
        parpostDataams.auditOpinion = ''
      } else if (params.auditStatus == 3 && !params.auditOpinion) {
        this.$message({
          message: '请输入驳回原因',
          type: 'warning',
        })
        return false
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$ajax
        .postData('adm/withdraw/audit', params)
        .then((data) => {
          loading.close()
          this.$message({
            type: 'success',
            message: '审核成功!',
          })
          this.search()
          this.auditVisible = false
        })
        .catch((error) => {
          loading.close()
          this.$message({
            message: error.codeDes || error.message,
            type: 'error',
          })
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  color: #fff;
  text-align: center;
  line-height: 50px;
  border-radius: 4px;
}
.bg-purple-dark {
  background: #58af5c;
}
.bg-purple {
  background: #458fe3;
}
.bg-purple-light {
  background: #ef7448;
}
.bg-purple-last {
  background: #a748ef;
}
.grid-content {
  border-radius: 4px;
  padding: 30px;
  font-size: 26px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
